<!DOCTYPE html>
<script>
onload = () => {
  if (window.testRunner && window.internals) {
    testRunner.dumpAsText();
    testRunner.setCustomTextOutput(internals.layerTreeAsText(document));
  }
}
</script>
<div id="green1" style="background: hotpink; padding: 10px; will-change: transform; position: absolute; top: 0; left: 0">
  <div style="background: green; padding: 50px">
    <div style="background: red; width: 50px; height: 50px"></div>
  </div>
</div>
<div id="green2" style="background: hotpink; padding: 10px; will-change: transform; position: absolute; top: 0; left: 200px">
  <div style="background: green; padding: 50px; transform: translateX(10px)">
    <div style="background: red; width: 50px; height: 50px"></div>
  </div>
</div>
<div id="green3" style="background: hotpink; padding: 10px; will-change: transform; position: absolute; top: 0; left: 400px">
  <div style="background: red; width: 100px; height: 100px; position: absolute"></div>
  <div style="background: green; width: 100px; height: 100px; position: absolute"></div>
</div>
<div id="brown1" style="will-change: transform; position: absolute; top: 200px; left: 0px">
  <div style="background: green">
    <div style="background: rgba(255, 0, 0, 0.4); width: 100px; height: 100px"></div>
  </div>
</div>
<div id="brown2" style="will-change: transform; position: absolute; top: 200px; left: 200px">
  <div style="background: green">
    <div style="opacity: 0.4; background: red; width: 100px; height: 100px"></div>
  </div>
</div>
<div id="brown3" style="will-change: transform; position: absolute; top: 200px; left: 400px;
                        width: 100px; height: 100px; background: green; overflow: scroll">
  <div style="background: rgba(255, 0, 0, 0.4); height: 10000px"></div>
</div>
<div id="brown4" style="will-change: transform; position: absolute; top: 200px; left: 600px;
                        width: 100px; height: 100px; background: green; overflow: scroll">
  <div style="opacity: 0.4; background: red; height: 10000px"></div>
</div>
